<template>
  <!-- 置顶嘉宾模块 -->
  <view class="puttop" v-if="!topGuestsStatus">
    <text class="text"> 明星会员 </text>
    <view class="bottom"> </view>
    <view class="cradChange">
      <view class="image">
        <image class="image" src="@/static/images/换一批.png"> </image>
      </view>
      <view class="change" @tap="changeTopGuest"> 换一批 </view>
    </view>
    <view class="putTop" @tap="wantTop()"> 我要置顶 </view>
    <scroll-view class="" scroll-x="true">
      <view class="cardItem">
        <CardItem :styleId="1" v-for="item in topGuestList" :key="item.id" :data="item" />
      </view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import type { TopGuests } from '@/types/index/home'
import CardItem from './CardItem.vue'
import { getTopGuestsAPI } from '@/services/index/home'
import { onMounted, ref } from 'vue'
//限制置顶次数
const putTopNum = ref<number>(0)
const wantTop = () => {
  uni.navigateTo({
    url: '/pages/my/MyTop/Top',
  })
}
onMounted(() => {
  getTopGuestList()
})

//置顶嘉宾
const topGuestsStatus = ref(false)
const topGuestList = ref<TopGuests[]>([])
const getTopGuestList = async () => {
  const { data } = await getTopGuestsAPI()
  topGuestList.value = data.result
  if (topGuestList.value.length == 0) {
    topGuestsStatus.value = true
  }
}
const changeTopGuest = async () => {
  putTopNum.value++
  if (putTopNum.value <= 5) {
    const { data } = await getTopGuestsAPI()
    topGuestList.value = data.result
  } else {
    uni.showToast({
      title: '每天只有五次机会',
      icon: 'none',
    })
  }
}
</script>

<style scoped lang="scss">
.puttop {
  width: 750rpx;
  height: 560rpx;
  background-color: white;
  border-radius: 10rpx;
  margin-bottom: 40rpx;
  box-shadow: 2rpx 5rpx 10rpx -2rpx #dbdbdb;

  .text {
    font-weight: 700;
    font-size: 40rpx;
    position: relative;
    top: 15rpx;
    left: 30rpx;
    color: #97979b;
  }

  .putTop {
    width: 130rpx;
    height: 36rpx;
    background: linear-gradient(to right, #0f84d8, #c7e5fa);
    color: white;
    border-radius: 40rpx;
    text-align: center;
    line-height: 36rpx;
    font-size: 21rpx;
    position: relative;
    left: 598rpx;
    top: -65rpx;
  }

  .cradChange {
    width: 102.78rpx;
    height: 33.33rpx;
    display: flex;
    justify-content: space-between;
    align-content: center;
    border-radius: 40rpx;
    background-color: #f4f4f4;
    position: relative;
    top: -30rpx;
    left: 200rpx;

    .image {
      width: 22rpx;
      height: 18.28rpx;
      margin-left: 6rpx;
      margin-bottom: 13rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }

    .change {
      width: 54.17rpx;
      height: 17.36rpx;
      font-size: 18rpx;
      color: #898989;
      margin-top: 4rpx;
      margin-right: 9rpx;
    }
  }

  .cardItem {
    margin-top: -30rpx;
    display: flex;
  }

  .bottom {
    width: 49rpx;
    height: 13rpx;
    border-radius: 30rpx;
    background: linear-gradient(to right, #0f84d8, #c7e5fa);
    position: relative;
    top: 30rpx;
    left: 60rpx;
  }
}
</style>
